<!--  记得import .js中自定义的方法-->

<template>
  <div>


<!--    <el-form :model="nrplgl" :rules="nrplglRules" ref="nrplglRulesForm">    &lt;!&ndash;  ref下面有引用的  &ndash;&gt;-->
<!--      <el-form-item label="文章内容详情" style="margin-top: 3px; margin-left: 30px"></el-form-item>-->
<!--      <hr style="margin-bottom: 30px;">-->

<!--      <el-form-item label="文章标题" prop="title" label-width="100px">-->
<!--        <el-input v-model="nrplgl.title" autocomplete="off" style="width:500px" disabled></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="发布渠道" prop="channel" label-width="100px">-->
<!--        <el-input v-model="nrplgl.channel" autocomplete="off" style="width:500px" disabled-->
<!--        ></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="发布频道" prop="channel2" label-width="100px">-->
<!--        <el-input v-model="nrplgl.channel2" autocomplete="off" style="width:500px" disabled-->
<!--        ></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="文章类型" prop="type" label-width="100px">-->
<!--        <el-input v-model="nrplgl.type" autocomplete="off" style="width:500px" disabled></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="关键词" prop="key1" label-width="100px">-->
<!--        <el-input v-model="nrplgl.key1" autocomplete="off" style="width:500px" disabled></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="发布人" prop="publisher" label-width="100px">-->
<!--        <el-input v-model="nrplgl.publisher" autocomplete="off" style="width:500px" disabled-->
<!--        ></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="发送时间" prop="time" label-width="100px">-->
<!--        <el-date-picker-->
<!--          v-model="nrplgl.time"-->
<!--          type="datetime"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
<!--          placeholder="选择日期和时间"-->
<!--          style="width:500px"-->
<!--          disabled-->
<!--        >-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <el-form :model="nrplgl" :rules="nrplglRules" ref="nrplglRulesForm">
      <el-row>
<!--        <el-form-item label="文章内容详情" style="margin-top: 3px; margin-left: 30px"></el-form-item>-->
<!--        <span style="margin-top: 83px; margin-left: 30px">文章内容详情</span>-->
<!--        <el-button type="danger" size="small" @click="delBatch" icon="el-icon-close" style="margin-top: 3px; margin-left: 1370px"></el-button>-->
<!--        margin:上右下左 -->
        <div style="display: flex; align-items: center;">
          <p style="margin: 0 10px 0 0;">文章内容详情</p>
          <el-button type="danger" size="small" @click="closenrplglxqThisPage" icon="el-icon-close" style="margin-left: auto;"></el-button>
        </div>


        <hr style="margin-bottom: 30px;">

        <el-col :span="10">
          <el-form-item label="文章标题" prop="title" label-width="100px">
            <el-input v-model="nrplgl.title" autocomplete="off" style="width:100%" disabled></el-input>
          </el-form-item>

          <el-form-item label="发布渠道" prop="channel" label-width="100px">
            <el-input v-model="nrplgl.channel" autocomplete="off" style="width:100%" disabled></el-input>
          </el-form-item>

          <el-form-item label="发布频道" prop="channel2" label-width="100px">
            <el-input v-model="nrplgl.channel2" autocomplete="off" style="width:100%" disabled></el-input>
          </el-form-item>

          <el-form-item label="文章类型" prop="type" label-width="100px">
            <el-input v-model="nrplgl.type" autocomplete="off" style="width:100%" disabled></el-input>
          </el-form-item>

          <el-form-item label="关键词" prop="key1" label-width="100px">
            <el-input v-model="nrplgl.key1" autocomplete="off" style="width:100%" disabled></el-input>
          </el-form-item>
          <el-form-item label="发布人" prop="publisher" label-width="100px">
            <el-input v-model="nrplgl.publisher" autocomplete="off" style="width:100%" disabled></el-input>
          </el-form-item>

          <el-form-item label="发送时间" prop="time" label-width="100px">
            <el-date-picker
              v-model="nrplgl.time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期和时间"
              style="width:100%"
              disabled
            >
            </el-date-picker>
          </el-form-item>
        </el-col>


        <el-col :span="10" style="margin-left: 100px" >

          <el-form-item label="图片" prop="image" label-width="100px">
            <template slot-scope="scope">
              <img :src="nrplgl.image" alt=" " style="max-width: 300px; max-height: 300px;"/>
            </template>
          </el-form-item>
<!--          要用nrplgl.image，这张表全是发过来的数据，自身没有查-->

          <el-form-item label="文章内容" prop="content" label-width="100px">
            <p >{{nrplgl.content }}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>




  </div>
</template>


<script>
import row from 'element-ui/packages/row'
// /////////////////      ///////////////////////////////////////
import { addWz, delBatch, deleteById, edit, getList } from '@/api/nrplgl'
import { mapGetters } from 'vuex'

export default {
  computed: {
    row() {
      return row
    },
    ...mapGetters([
      'name'
    ])
  },

  methods: {
    fetchData() { // 获取数据
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        title: this.keyword.title     // 模糊查询用的
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log(params)
      // getList是api/unit.js中自己
      getList(params).then(res => {
        let pageInfo = res.data
        console.log('pageInfo', pageInfo)
        this.loading = false
        this.publishList = pageInfo.list
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log('使用以上参数,findAll查到共', this.total, '条数据')    // 打印总行数(不分页)

      })
    },

    openAddDialogInNewTab() {
      // const path = '/example/xz'; // 你的添加课程页面路由(修改为与你的路由配置中相匹配的路径 )
      const path = '/example/xz' // 你的添加课程页面路由(修改为与你的路由配置中相匹配的路径 )
      window.open(this.$router.resolve(path).href, '_blank')
      // _blank 参数和 window.open 调用，是用于在新窗口或新标签页，
      // Vue Router 提供了更适用于单页面应用（SPA）的导航方式。
    },
    opennrplglxqThisPage(a, b) {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      // this.$router.push('/example/xz');
      this.$router.push({
        name: 'nrplglxq',
        // 确保你在传递数据时进行适当的编码，例如使用 encodeURIComponent。
        query: { index520: encodeURIComponent(JSON.stringify(a)), data520: b }
      })
    },

    closenrplglxqThisPage() {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      // this.$router.push('/example/xz');
      this.$router.push({
        name: 'nrplgl',
      })
    },

    openAddDialogInThisPage2() {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      this.$router.push('/xz2')
    },

    fetchData2() { // 严格查找课程名称
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        courseName: this.selectCourse.courseName
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log('传参了吗？', params)
      // getList是api/unit.js中自己
      return getList2(params).then(res => {
        let pageInfo = res.data
        // console.log("pageInfo", pageInfo)
        this.loading = false
        this.publishList = pageInfo.list
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log('使用以上参数,findAll2查到共', this.total, '条数据')    // 打印总行数(不分页)
        return this.total
      })
    },

    /**  管理当前选课用的  */
    fetchData3() {
      // 组装查询参数
      let params = {
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
        cid: this.cid
      }
      console.log('传参了吗？', params)
      // getList是api/unit.js中自己

      getList3(params).then(res => {
        if (res.code == 20000) {
          this.loading = false
          this.publishList2 = res.data.list
          console.log('courseList2courseList2', this.publishList2)
          this.pageNum2 = res.data.pageNum
          this.total2 = res.data.total
        } else {
          this.$message({
            type: 'error',
            message: '查询失败',
            duration: 1000
          })
        }
        console.log('使用以上参数,findAll2查到共', this.total, '条数据')    // 打印总行数(不分页)
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },

    handleSizeChange2(val) {
      this.pageSize2 = val
      this.fetchData3()
    },
    handleCurrentChange2(val) {
      this.pageNum2 = val
      this.fetchData3()
    },

    //   模糊搜索
    search() {
      this.pageNum = 1
      this.fetchData()
    },

    // 打开添加对话框
    openAddDialog() {
      this.title = '新增文章'
      this.dialogFormVisible = true
    },
    // 另一个对话框
    manage(row) {
      this.selectCourse = row
      this.dialogFormVisible2 = true
      this.cid = this.selectCourse.courseNo
      this.fetchData3()
    },

    addCourse(formName) {
      this.$refs[formName].validate((valid) => {     // valid是个布尔值, => 后面是提交表格校验返回true时向后执行的代码
        if (valid) {
          // 上面是校验通过
          // 此处执行添加
          // console.log("添加status", this.selectCourse)

          // 不重复，才往里执行
          if (this.title === '新增文章') {
            addWz(this.nrplgl).then(res => {
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.fetchData()
              this.$refs[formName].resetFields()
            })
          } else if (this.title === '编辑文章') {
            edit(this.nrplgl).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.fetchData()
              this.$refs[formName].resetFields()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogFormVisible = false
      })
    },

    // ID删除
    handleDelete(row) {
      console.log('接收到选中的id为' + row)
      this.$confirm('是否确认删除序号为' + row.id + '的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发请求
        let params = {
          id: row.id
        }
        deleteById(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 1000
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        })
      })
    },

    //   重置表单
    resetSearchForm(formName) {
      this.$refs[formName].resetFields()
      this.keyword.title = null
      this.fetchData()
    },

    // 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      this.ids = []
      // 选项行（选中改变得到选中的这一行数据）
      // console.log("装着n个对象的数组: ", selectionRowArr)
      // 数组里面还是数组
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].id)
        // selectionRow[i].planNumber // 元素.对象
      }
      // console.log("看看ids数组: (数字数组)", this.ids)
      // 该方法至此完成任务
    },

    // 批量删除
    delBatch() {
      this.$confirm('是否确认删除单位编码为' + this.ids + '的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发请求
        let idStr = this.ids.join(',')
        // 这行代码的目的是将this.ids数组中的所有元素转换成一个由逗号分隔的字符串
        // 例如，如果this.ids是[1, 2, 3]，那么执行这行代码后，idStr的值将会是"1,2,3"。
        // console.log("收到字符串idStr", idStr)
        let params = {
          ids: idStr
        }
        delBatch(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 500
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 500
        })
      })
    }

  },
  name: 'SelectCourse',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 单位表格数据
      publishList: [],
      courseList2: [],
      // 上面对应的this.courseList = pageInfo.list;  别忘了改，否则不显示
      pageNum: 1,     // 使刚进去时看到的是：查找完的第“几”页数据
      pageSize: 5,    // 这个数一定要和:page-sizes="[6,8,10,200]"中的第一个显示条目一样，否则丢失数据总数
      currentPage: 1, // 决定刚进去时显示选中第“几”页的页码，注意一定要currentPage == pageNum，否则二者显示的关系不对应
      total: 0,
      hideSerialNumber: true, // 设置为 true 以隐藏“序号”列
      pageNum2: 1,     // 使刚进去时看到的是：查找完的第“几”页数据
      pageSize2: 3,    // 这个数一定要和:page-sizes="[6,8,10,200]"中的第一个显示条目一样，否则丢失数据总数
      currentPage2: 1, // 决定刚进去时显示选中第“几”页的页码，注意一定要currentPage == pageNum，否则二者显示的关系不对应
      total2: 0,

      cid: '',

      ids: [],
      keyword: {
        courseNo: null,
        title: null
        // status: null,
        // measureName: null,
      },
      title: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      // inputValue: '',  // 在data()中声明inputValue，用于存储<el-autocomplete>的输入值
      // restaurants: [],
      // state1: '',
      // state2: '',
      nrplgl: {
        id: null,
        title: null,
        channel: null,
        channel2: null,
        type: null,
        key1: null,
        publisher: null,
        time: null,
        content: null,
        image: null,
        number: null,
        time2: null,
        //   写不写scope.row都能获得整行数据，包括未显示的
      },

      nrplglRules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        channel: [
          { required: true, message: '发布渠道不能为空', trigger: 'blur' }
        ],
        channel2: [
          { required: true, message: '发布频道不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '文章类型不能为空', trigger: 'blur' }
        ],
        key1: [
          { required: true, message: '关键词不能为空', trigger: 'blur' }
        ],
        publisher: [
          { required: true, message: '发布人不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    console.log("this.$route.query========================", this.$route.query)
    // console.log("this.$route.query========================", this.$route.query.data520)
    // const index = JSON.parse(decodeURIComponent(this.$route.query.index520))
    // console.log("index=====================", index)
    // const data = this.$route.query.data520;
    // console.log("data=====================", data)
    this.nrplgl = this.$route.query.data520 // 回显传来的数据
    console.log("nrplgl.image=====================", this.nrplgl.image)


  }
}
</script>


<style scoped lang="scss">

</style>
